<template>
  <div class="seach">
    <div class="input-box">
        <input type="text" placeholder="请输入任务名称" v-model="inputval">
        <span @click="add">新增</span>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
             inputval: "", //绑定输入框的内容
        }
       
    },
    methods:{
        add(){
            if(this.inputval){
                 this.$store.commit("addTask",this.inputval)
                 this.inputval=""
            }else{
                alert("请先输入任务")
            }
           
        }
    }
}
</script>

<style lang="scss" scoped>
.seach{
    .input-box{
        box-sizing: border-box;
        padding: 12px 10px;
        display: flex;
        align-items: center;
        input{
            flex: 1;
            padding: 10px 16px;
            outline: none;
            border: none;
            background-color: #eee;
        }
        span{
            margin-left: 16px ;
            color: skyblue;
        }
    }
}
</style>